<template>
	<view class="stroe">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">积分商城</block>
		</cu-custom>
		<view class="top-header">
			<view class="avatar-info" v-if="hasLogin">
				<image class="avatar" :src="userInfo.avatar || '/static/default_avatar.png'" mode="aspectFill"></image>
				<image class="avatar-vip" src="/static/vip.png" mode=""></image>
				<view class="user-info">
					<view class="user-name">{{userInfo.nickname || '未知'}}</view>
					<view class="user-sign">已累计签到 {{signInfor.data.series || '0'}} 天</view>
				</view>
				<button v-if="signStatus" class="sign-btn,success-sign">
					已签
				</button>
				<button v-if="!signStatus" class="sign-btn" @tap="signIn()">
					签到
				</button>
			</view>
			<view class="unlogin-info" v-if="!hasLogin">
				<view class="unlogin" v-if="!hasLogin">
					<navigator url="/pages/my/index" open-type="switchTab">去签到，得积分</navigator>
				</view>
			</view>
			<view class="progress-box" v-if="hasLogin">
				<view class="bar-box">
					<progress class="bar" :percent="percentnow" border-radius='6' activeColor="#ffffff" backgroundColor="rgb(193,73,6)"
					 stroke-width="6" />
					<ol class='node-line'>
						<li class='list-point' v-for="(site,i) in nearDate" :key="site">
							<view class="point-node">
								<view class="point-num">+6分</view>
								<view :class="['point-img', site.check == 1 ? 'active-img' : '']"></view>
								<view class="point-day">{{weeks[i]}}</view>
							</view>
						</li>
					</ol>
				</view>
				<view class="percent-sign">
					<view class="sign-now">{{userInfo.score}}</view>
					<view class="sign-title">我的积分</view>
				</view>
			</view>
		</view>
		<view class="middle-ad">
			<image class="middle-ad-img" src="../../../static/jifen.png" @click="goTask"></image>
		</view>
		<view class="content-table">
			<view class="home-shops">
				<view class="tabbar">
					<view :class="['label', sortType == 0 ? 'active' : '']" @tap="switchTab(0)"><text>兑换好礼</text></view>
					<view :class="['label', sortType == 1 ? 'active' : '']" @tap="switchTab(1)"><text>排行榜</text></view>
				</view>
				<view class="lists" v-if="sortType == 0">
					<view class="storellist">
						<view :shops="item" v-for="item in shops" :key="item.pid">
							<view class="store-item">
								<view class="store-img">
									<image :src="item.img||'/static/default_shop_log.png'" v-if="item.img"></image>
								</view>
								<view class="store-info">
									<view class="store-name">{{ pnameText(item)}}</view>
									<view class="store-price">
										<image src="../../../static/store-jifen.png"></image>{{item.money}}积分
									</view>
									<view open-type="navigate" hover-class="none"><button class="exchange-btn" v-on:click="goDetails(item.pid)">积分兑换</button></view>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="more" v-if="shops"></uni-load-more>
				</view>
				<view class="lists" v-if="sortType == 1">
					<view class="ranking-list">
						<view :rankingList="rank" v-for="(rank,i) in rankingList" :key="rank.id">
							<view class="ranking-item">
								<view class="item-no" v-if="i<3">
									<image src="../../../static/ranking-01.png" v-if="i==0"></image>
									<image src="../../../static/ranking-02.png" v-if="i==1"></image>
									<image src="../../../static/ranking-03.png" v-if="i==2"></image>
								</view>
								<view class="item-no" v-if="i>2">{{i+1}}</view>
								<view class="item-user">
									<image class="avatar" mode="aspectFill" :src="rank.img" v-if="rank.img"></image>
									<view class="item-user-infos">
										<view class="user-name">{{nameChange(rank)}}</view>
										<view class="user-word">{{nameChange(rank)}}</view>
									</view>
								</view>
								<view class="item-num">
									{{rank.num}}
									<image src="../../../static/ranking-num.png"></image>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="more" v-if="rankingList"></uni-load-more>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import storeapi from "@/api/store";
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		data() {
			return {
				nearDate: ['0', '0', '0', '0', '0', '0', '0'],
				weeks: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				sortType: 0,
				shops: [],
				rankingList: [],
				signInfor: [],
				page: 1,
				signStatus: '',
				more: 'more',
				flag: false,
				percentnow: '0',
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo','shareId']),
		},
		components: {
			uniLoadMore
		},
		onLoad(params) {
			if (params.share_id && params.share_id != undefined) {
				this.$store.commit('setShareId', params.share_id);
			}
			this.getShops();
			this.getSignIn();
			this.percentAdd();
		},
		onShow() {
		},
		onReachBottom() {
			if (this.more !== 'noMore') {
				this.more = 'loading'
				this.page++;
				this.getShops();
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 600) { //当距离大于600时显示回到顶部按钮
				this.flag = true
			} else { //当距离小于600时隐藏回到顶部按钮
				this.flag = false
			}
		},
		methods: {
			goTask() {
				uni.navigateTo({
					url: '../task'
				})
			},
			nameText(item) {
				if (!item.name) return '未知商品';
				if (item.name.length > 6) {
					return item.name.slice(0, 4) + '...'
				}
				return item.name;
			},
			pnameText(item) {
				if (!item.name) return '未知商品';
				if (item.name.length > 4) {
					return item.name.slice(0, 2) + '...'
				}
				return item.name;
			},
			nameChange(item) {
				if (!item.name) return '未知商品';
				if (item.name.length > 12) {
					return item.name.slice(0, 8) + '...'
				}
				return item.name;
			},
			goDetails(e) {
				uni.navigateTo({
					url: '../details?pid=' + e
				});
			},
			async getShops(type) {
				let res = [];
				if (this.sortType == 1) {
					res = await storeapi.rankinglist({
						page: this.page,
					})
				} else {
					res = await storeapi.storelist({
						page: this.page,
					})
				}
				if (res.code == 1 && this.sortType == 1) {
					// console.log(res)
					if (res.data.length <= 6) {
						this.more = 'noMore';
					} else {
						this.more = 'more';
					}
					// this.rankingList =this.rankingList.concat(res.data);
					this.rankingList = res.data ? res.data : this.rankingList.concat(res.data)
				} else if (res.code == 1 && this.sortType == 0) {
					console.log(res)
					if (res.data.length <= 6) {
						this.more = 'noMore';
					} else {
						this.more = 'more';
					}
					// this.shops = this.shops.concat(res.data);
					this.shops = res.data ? res.data : this.shops.concat(res.data)
				}
			},
			async getSignIn() {
				let res = await storeapi.getsignIn({})
				if (res.code == 1) {
					console.log(res)
					this.signInfor = res;
					if (res.data.week) {
						this.nearDate = res.data.week;
					}
					if (res.data.checked == '1') {
						this.signStatus = res.data.checked;
						this.percentAdd();
					}
				}
			},
			async goSign() {
				console.log('share_id = ' + this.shareId);
				let res = await storeapi.setSignIn({
					share_id: this.shareId,
				})
				if (res.code == 1) {
					if (res.code == 1) {
						this.signStatus = '1';
						this.userInfo.score = this.userInfo.score + 6;
						this.$store.commit('setUserInfo', this.userInfo);
						// uni.setStorageSync('userInfo', this.userInfo);
						this.signInfor.data.series = this.signInfor.data.series + 1;
						this.getSignIn();
						this.percentAdd();
					}
				}
			},
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});
			},
			switchTab(sortType) {
				this.sortType = sortType;
				this.page = 1;
				this.getShops('change');
			},
			signIn() {
				if (this.signInfor.checked == '1') {
					return '';
				} else {
					this.goSign();
				}
			},
			percentAdd() {
				let now = new Date();
				let day = now.getDay();
				if (this.signStatus == '1') {
					if (day < '7') {
						day = day - 0.5;
					}
				} else {
					day = day - 1;
				}
				this.percentnow = day / 7 * 100;
			}
		}
	}
</script>
<style lang="less">
	.stroe {
		background: rgb(247, 247, 247);
		padding-bottom: 10px;
		font-family: "Noto Sans SC";
		height: 100vh;

		.top-header {
			height: 240rpx;
			background-color: rgb(250, 101, 15);
			border-bottom: 1rpx solid #fdc3a3;
			.avatar-info {
				position: relative;
				margin-left: 30rpx;
				margin-right: 30rpx;

				.user-info {
					height: 90rpx;
					padding-top: 10rpx;
					color: #fff;
					position: absolute;
					left: 110rpx;
					top: 15rpx;
				}
			}

			.unlogin-info {
				.unlogin {
					height: 90rpx;
					line-height: 90rpx;
					font-size: 50rpx;
					color: #ffffff;
					text-align: center;
					padding-top: 75rpx;
				}
			}

			.avatar {
				width: 80rpx;
				height: 80rpx;
				margin: 20rpx auto 0;
				border: 2rpx solid #FFA39F;
				border-radius: 50%;
			}

			.avatar-vip {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				left: 40rpx;
				transform: translateX(-50%);
				bottom: 0;
			}

			.user-name {
				font-family: 'MicrosoftJhengHei';
				font-size: 32rpx;
			}

			.user-sign {
				font-size: 25rpx;
				padding-top: 8rpx;
			}

			.sign-btn {
				float: right;
				font-size: 30rpx;
				font-weight: 600;
				color: #fa610e;
				margin-top: 40rpx;
				width: 140rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 60rpx;
			}

			.success-sign {
				background-color: #f7f7f7;
			}

			.progress-box {
				margin-left: 30rpx;
				margin-right: 30rpx;
				height: 90rpx;
				padding-top: 30rpx;

				.bar {
					width: 580rpx;
					margin-right: 20rpx;
					margin-top: 28rpx;
					float: left;
				}

				.percent-sign {
					width: 90rpx;
					// height: 120rpx;
					text-align: center;
					float: right;
					color: #ffffff;
					letter-spacing: 1.2px;

					.sign-now {
						font-size: 32rpx;
					}

					.sign-title {
						font-size: 20rpx;
					}
				}
			}

			.bar-box {
				position: relative;
			}

			.node-line {
				width: 580rpx;
				position: absolute;
				left: 0;
				top: -14rpx;
			}

			.list-point {
				width: 14.28%;
				display: inline-block;
				text-align: center;
			}

			.point-node {
				height: 95rpx;
				font-size: 20rpx;
				color: #ffffff;

				.point-num {
					height: 38rpx;
				}

				.point-img {
					height: 20rpx;
					width: 20rpx;
					margin: 0 auto;
					background-color: rgb(193, 73, 6);
					border-radius: 20rpx;
					margin-bottom: 10rpx;
				}

				.active-img {
					background-color: #ffffff;
				}

				.point-day {
					height: 20rpx;
					padding-bottom: 10rpx;
				}
			}
		}

		.middle-ad {
			height: 180rpx;
			margin-top: 15rpx;
			background-color: #fef3e8;
			border-top: 1rpx solid #fdc3a3;
			.middle-ad-img {
				width: 100%;
				height: 180rpx;
			}
		}

		.home-shops {
			text-align: center;
			font-family: "Source Han Sans CN";
			margin: 0 25rpx;
			margin-top: 5rpx;

			.tabbar {
				height: 80rpx;
				line-height: 80rpx;
				background-color: rgb(247, 247, 247);
			}

			.label {
				width: 50%;
				display: inline-block;
				font-family: "Source Han Sans CN";
				font-size: 30rpx;
				font-weight: 600;
				letter-spacing: 1.2px;
				color: #333333;
			}

			.active {
				background-color: #ffffff;
				color: #333333;
			}

			.lists {
				padding-top: 10rpx;
				background-color: rgb(247, 247, 247);

				.storellist {
					display: flex;
					width: 100%;
					justify-content: space-between;
					flex-wrap: wrap;

					ol {
						width: 100%;
					}
				}

				.store-item {
					display: inline-block;
					width: 349rpx;
					height: 165rpx;
					margin-bottom: 15rpx;
					background-color: rgb(255, 255, 255);
				}

				.store-img {
					width: 165rpx;
					height: 165rpx;
					float: left;

					image {
						width: 110rpx;
						height: 110rpx;
						margin: 0 auto;
						margin-top: 30rpx;
					}
				}

				.store-info {
					height: 165rpx;
					width: 165rpx;
					padding-left: 10rpx;
					display: inline-block;

					.store-name {
						height: 80rpx;
						line-height: 80rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
					}

					.store-price {
						height: 20rpx;
						line-height: 20rpx;
						font-size: 24rpx;
						color: rgb(235, 98, 86);

						image {
							width: 15rpx;
							height: 15rpx;
						}
					}

					.exchange-btn {
						height: 35rpx;
						line-height: 35rpx;
						font-size: 22rpx;
						margin-top: 20rpx;
						font-weight: 600;
						border-radius: 25rpx;
						background-color: rgb(250, 100, 15);
						color: #ffffff;
					}
				}

				.ranking-list {
					width: 700rpx;

					.ranking-item {
						height: 135rpx;
						font-family: 'SimSun';
						color: #4e84fd;
						font-size: 30rpx;
						background-color: #ffffff;
						margin-bottom: 4rpx;

						.item-no {
							width: 45rpx;
							height: 45rpx;
							line-height: 45rpx;
							text-align: center;
							border-radius: 45rpx;
							background-color: rgb(207, 228, 255);
							float: left;
							font-weight: 600;
							margin: 40rpx 20rpx 0 15rpx;

							image {
								width: 45rpx;
								height: 55rpx;
							}
						}

						.item-user {
							height: 135rpx;
							float: left;
							padding-top: 15rpx;

							image {
								height: 90rpx;
								width: 90rpx;
								border-radius: 90rpx;
								margin-right: 30rpx;
							}

							.item-user-infos {
								float: right;
								height: 90rpx;
								font-family: "Source Han Sans CN";

								.user-name {
									height: 60rpx;
									line-height: 60rpx;
									font-size: 30rpx;
								}

								.user-word {
									height: 30rpx;
									line-height: 30rpx;
									color: #939393;
									font-size: 26rpx;
									text-align: left;
								}
							}
						}

						.item-num {
							width: 190rpx;
							height: 135rpx;
							line-height: 135rpx;
							float: right;
							color: #ff703e;
							font-family: "Source Han Sans CN";
							font-size: 40rpx;

							image {
								width: 45rpx;
								height: 45rpx;
								float: right;
								margin-top: 44.5rpx;
								margin-right: 10rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
